<div class="renting-view-container">
  <div class="nav-top"></div>
  <div class="pc-width">
    <app-progress-bar [ProgressBarList]="progressBarList"></app-progress-bar>
    <div class="apartment-layout">
      <div class="type">
        <span>公寓</span>
        <span>楼栋</span>
        <span>楼层</span>
        <span>房型</span>
      </div>
      <div class="form-group">
        <div class="select-box">
          <select class="form-control" name="" [(ngModel)]="apartmentId" (change)="getBuilding()">
            <option *ngFor="let apartment of apartmentList" [value]="apartment.id">{{apartment.name}}</option>
          </select>
        </div>
        <div class="select-box">
          <select class="form-control" name="" [(ngModel)]="currentBuildingId"
                  (change)="buildingChange(currentBuildingId,data)">
            <option *ngFor="let building of buildingList" [value]="building.id">{{building.name}}</option>
          </select>
        </div>
        <div class="select-box">
          <select class="form-control" name="" [(ngModel)]="currentFloorId"
                  (change)="floorChange(currentFloorId,currentBuildingId,buildingList)">
            <option *ngFor="let floor of floorList" [value]="floor.id">{{floor.name}}</option>
          </select>
        </div>
        <div class="select-box">
          <select class="form-control" name="" [(ngModel)]="currentLayoutId"
                  (change)="layoutChange(currentLayoutId,data)">
            <option *ngFor="let layout of layoutList" [value]="layout.id">{{layout.name}}</option>
          </select>
        </div>
      </div>
      <div class="status-type clearfix">
        <div class="left fl">
          <p class="renting">
            <i></i>
            <span>可租</span>
          </p>
          <p class="rented">
            <i></i>
            <span>已租</span>
          </p>
          <p class="repair">
            <i></i>
            <span>维修</span>
          </p>
          <p class="selected">
            <i></i>
            <span>已选</span>
          </p>
        </div>
      </div>
      <div class="apartment-modal">
        <div class="floor-plan-container" *ngIf="!!currentFloor">
          <div id="dynamic-room-{{item.id}}"
               class="dynamic-room draggable ui-widget-contnet"
               *ngFor="let item of roomData" (click)="selectRoom(item)"
               [ngStyle]="roomStyle(item)">
            <span class="room-name">{{item.houseNo}}</span>
          </div>
          <img [src]="currentFloor.src">
        </div>
      </div>

      <div class="rent-btn-group">
        <ul style="float: left;padding-left: 16px;" *ngIf="selectedRoom">
          <li style="padding-right: 10px">￥{{selectedRoom?.salePrice}}/月</li>
          <li style="padding-right: 10px">{{selectedRoom?.lightDark?'明间':'暗间'}}</li>
          <li style="padding-right: 10px">{{selectedRoom?.orientationsName}}</li>
          <li style="padding-right: 10px">{{selectedRoom?.area}}m2</li>
          <li style="padding-right: 10px">{{selectedRoom?.layoutName}}</li>
          <li style="padding-right: 10px">{{selectedRoom?.houseNo}}</li>
        </ul>
        <button [disabled]="!selectedRoom" (click)="goToPlaceOrderView()" class="bg-green">下一步</button>
      </div>
    </div>
  </div>
</div>
<login-modal-view [showModal]="showLoginModal" (modalClose)="closeLogin($event)"></login-modal-view>
